import React, { useEffect } from 'react';
import { Form, Input, Modal, Select } from 'antd';
import { PermissionTableListItem } from '../permissionData.d';

export interface FormValueType extends Partial<PermissionTableListItem> {
}

export interface UpdateFormProps {
    onCancel: () => void;
    onSubmit: (values: Partial<PermissionTableListItem>) => void;
    updateModalVisible: boolean;
    currentData: Partial<PermissionTableListItem>;
}
const FormItem = Form.Item;

const formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
};

const PermissionUpdateForm: React.FC<UpdateFormProps> = (props) => {
    const [form] = Form.useForm();
    const { Option } = Select;

    const {
        onSubmit,
        onCancel,
        updateModalVisible,
        currentData,
    } = props;

    useEffect(() => {
        if (form && !updateModalVisible) {
            form.resetFields();
        }
    }, [props.updateModalVisible]);

    useEffect(() => {
        if (currentData) {
            form.setFieldsValue({
                ...currentData,
            });
        }
    }, [props.currentData]);

    const handleSubmit = () => {
        if (!form) return;
        form.submit();
    };

    const handleFinish = (values: { [key: string]: any }) => {
        if (onSubmit) {
            onSubmit(values);
        }
    };

    const renderContent = () => {
        return (
            <>
                <FormItem
                    name="permissionId"
                    label="主键"
                    hidden
                >
                    <Input id="update-permissionId" placeholder="请输入主键" />
                </FormItem>
                <FormItem
                    name="parentId"
                    label="父级权限id"
                >
                    <Input id="update-parentId" placeholder="请输入父级权限id" />
                </FormItem>
                <FormItem
                    name="permissionName"
                    label="权限名称"
                    rules={[{ required: true, message: '请输入权限名称' }]}
                >
                    <Input id="update-permissionName" placeholder="请输入权限名称" />
                </FormItem>
                <FormItem
                    name="authority"
                    label="权限"
                >
                    <Input id="update-authority" placeholder="请输入权限" />
                </FormItem>
                <FormItem
                    name="icon"
                    label="图标"
                >
                    <Input id="update-icon" placeholder="请输入图标" />
                </FormItem>
                <FormItem
                    name="permissionType"
                    label="权限类型:"
                >
                    <Select id="update-permissionType">
                        <Option value={0}>目录</Option>
                        <Option value={1}>菜单</Option>
                        <Option value={2}>按钮</Option>
                    </Select>
                </FormItem>
                <FormItem
                    name="routePath"
                    label="路由路径"
                >
                    <Input id="update-routePath" placeholder="请输入路由路径" />
                </FormItem>
                <FormItem
                    name="component"
                    label="组件路径"
                >
                    <Input id="update-component" placeholder="请输入组件路径" />
                </FormItem>
                <FormItem
                    name="isOuter"
                    label="外部链接:"
                >
                    <Select id="update-isOuter">
                        <Option value={0}>否</Option>
                        <Option value={1}>是</Option>
                    </Select>
                </FormItem>
                <FormItem
                    name="sort"
                    label="排序"
                >
                    <Input id="update-sort" placeholder="请输入排序" />
                </FormItem>
                <FormItem
                    name="status"
                    label="启用状态:"
                >
                    <Select id="update-status">
                        <Option value={0}>禁用</Option>
                        <Option value={1}>启用</Option>
                    </Select>
                </FormItem>
                <FormItem
                    name="remark"
                    label="备注"
                >
                    <Input id="update-remark" placeholder="请输入备注" />
                </FormItem>
            </>
        );
    };


    const modalFooter = { okText: '保存', onOk: handleSubmit, onCancel };

    return (
        <Modal
            forceRender
            destroyOnClose
            title="用户管理"
            visible={updateModalVisible}
            {...modalFooter}
        >
            <Form
                {...formLayout}
                form={form}
                onFinish={handleFinish}
            >
                {renderContent()}
            </Form>
        </Modal>
    );
};

export default PermissionUpdateForm;
